<form [formGroup]="form" class="form-horizontal" role="form" (ngSubmit)="submit()" novalidate>

  <div class="row">
    <div class="col-md-14 col-sm-offset-6">
      <div style="padding: 1.5em 0 0.5rem 1rem;">
        <div class="alert alert-info">Provide a URI that points to the location of the properties file</div>
      </div>
    </div>
  </div>

  <fieldset id="importAppsViaUri">
    <div class="form-group" [class.has-error]="form.get('uri').invalid && form.get('uri').dirty">
      <label for="uriInput" class="col-sm-6 control-label">Uri</label>
      <div class="col-sm-14">
        <input type="text" id="uriInput" name="uri" autofocus formControlName="uri" class="form-control"
               placeholder="http://url.to.properties">
        <span class="help-block" *ngIf="form.get('uri').invalid && form.get('uri').dirty">
          Please provide a valid URI pointing to the respective properties file.
        </span>
      </div>
    </div>
  </fieldset>

  <div class="form-group">
    <div class="col-sm-14 col-sm-offset-6">
      <hr/>
      <label class="checkbox-inline">
        <input formControlName="force" id="forceInput" name="force" type="checkbox"/>
        Force
      </label>
      <p class="checkbox-description">
        By checking <strong>force</strong>, the applications will be imported and installed
        even if it already exists but only if not being used already.
      </p>
    </div>
  </div>

  <div class="footer-actions row" style="padding-bottom: 2em;text-align: center">
    <button name="cancel" type="button" class="btn btn-default" routerLink="/apps">Cancel</button>
    <button name="submit" type="submit" class="btn btn-primary" [disabled]="form.invalid">
      Import the application(s)
    </button>
  </div>

</form>

